<!--
 * @FilePath     : /study_code/css/flex-abbreviation.html
 * @Description  : flex 属性简写示例
 * @Date         : 2025-04-27 14:54:16
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-27 15:18:09
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
    <style>
      div {
        height: 20px;
      }
      .parent {
        display: flex;
        width: 400px;
        background-color: lightblue;
        padding-top: 10px;
      }

      .c-a {
        flex: 3 3 20px;
        background-color: lightcoral;
      }
      .c-b {
        flex: 2 7 40px;
        background-color: lightgreen;
      }
      /*
      1、简写1；
      宽度为 flex-basis 设置，为 20 + 40 = 60px；
      子项会去占用剩余尺寸；
      flex-shrink 设置无效 —— 不会触发缩小（因为子项没有超出）；
      A: 20 + 3/5 * (400 - 60) = 20 + 204 = 224
      B: 40 + 2/5 * (400 - 60) = 40 + 136 = 176
      */

      .c-a1 {
        flex: 3 3 200px;
        background-color: lightcoral;
      }
      .c-b1 {
        flex: 2 7 300px;
        background-color: lightgreen;
      }
      /*
      2、简写2
      宽度为 flex-basis 设置，为 200 + 300 = 500px；
      子项会去缩小自己适应容器；
      flex-grow 无效；
      A：200 - 100 * (200 * 3 / (200 * 3 + 300 * 7)) = 200 - 22 = 178
      B: 300 - 100 * (300 * 7 / (200 * 3 + 300 * 7)) = 300 - 78 = 222
      */
    </style>
  </head>
  <body>
    <h2>容器填充剩余尺寸</h2>
    <div class="parent">
      <div class="c-a"></div>
      <div class="c-b"></div>
    </div>

    <hr />
    <h2>子项缩小自己尺寸</h2>
    <div class="parent">
      <div class="c-a1"></div>
      <div class="c-b1"></div>
    </div>

    <script></script>
  </body>
</html>
